<template>
  <el-dialog class='shareDataboard'
             :title="$route.path.includes('Bots') ? 'Share Bots' : 'Share Dashboard'"
             :visible.sync="dialogVisible"
             width="750px"
             @open="open"
             @close="close">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="$t('custom.component.shareLinkDialog.shareAbleLink')"
                   name="0"
                   v-if="!$route.path.includes('Bots')&&!showTV">
        <P>{{ $t('custom.component.shareLinkDialog.copyToShare') }}:</P>
        <div class="copyBox">
          <el-input :value="shareLink"></el-input>
          <el-button size="small"
                     @click="copyLink(shareLink, 'shareAbleLink')">
            {{ $t('custom.component.shareLinkDialog.copy') }}
          </el-button>
        </div>
        <el-popover placement="top"
                    v-model="showRevokeToken">
          <p>{{ $t('custom.component.shareLinkDialog.confirmRevokeToken') }}</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini"
                       type="text"
                       @click="showRevokeToken = false">
              {{ $t('custom.component.shareLinkDialog.cancel') }}
            </el-button>
            <el-button type="primary"
                       size="mini"
                       @click="revokeToken();showRevokeToken = false">
              {{ $t('custom.component.shareLinkDialog.revokeTokenYes') }}
            </el-button>
          </div>
          <el-button type='text'
                     class="refresh"
                     slot="reference"
                     icon="el-icon-refresh"
                     v-if="$route.path !== '/FormList'">
            {{ $t('custom.component.shareLinkDialog.revokeToken') }}
          </el-button>
        </el-popover>
        <div class="databoards"
             style="display: none">
          <p>Looped Databoards</p>
          <p>Loop multiple Databoards together to create one centrallized Shareable link that you can easily share with
            other.
            <el-link>Learn more</el-link>
          </p>
          <p><i class="el-icon-plus" /> Create a Databoard Loop</p>
        </div>
        <p class="shareAddSetting"
           @click="shareSetting = !shareSetting"><i :class="shareSetting ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
          {{ $t('custom.component.shareLinkDialog.setting') }}</p>
        <div v-show='shareSetting'>
          <div class="shareSetting"
               v-if='false'>
            <el-checkbox v-model="shareLimitIp"
                         @change="((val) => {removeInput(val, 'ip')})">
              {{ $t('custom.component.shareLinkDialog.limitIpAddress') }}
            </el-checkbox>
            <el-input :disabled='!shareLimitIp'
                      v-model="shareAbleLink.ip"
                      style="width:60%"></el-input>
          </div>
          <div class="shareSetting"
               v-if='false'>
            <el-checkbox v-model="sharePassword"
                         @change="((val) => {removeInput(val, 'password')})">
              {{ $t('custom.component.shareLinkDialog.password') }}
            </el-checkbox>
            <el-input :disabled="!sharePassword"
                      v-model="shareAbleLink.password"
                      style="width:60%"
                      show-password></el-input>
          </div>
          <div class="shareSetting">
            <div>
              <el-radio :label="1"
                        v-model="timeRadio">{{ $t('custom.component.shareLinkDialog.noTimeLimit') }}
              </el-radio>
              <el-radio :label="2"
                        v-model="timeRadio">{{ $t('custom.component.shareLinkDialog.customizedTime') }}
              </el-radio>
              <el-input-number v-show='timeRadio === 2'
                               style="width:100px;"
                               v-model="selectedDate"
                               :min="1"
                               size="small"
                               :max="maxtotalNum"
                               controls-position="right"></el-input-number>
              <el-select v-show='timeRadio === 2'
                         v-model="selectdTime"
                         :placeholder="$t('placeholder.sto')"
                         @change="changeData">
                <el-option v-for="(item,index) in timeOption"
                           :key="index"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
          <div class="shareSetting"
               v-if="resourceType === 'Form'">
            <div>User Access:</div>
            <div style="display: flex; align-items: center;flex: 1; margin-left: 50px">
              <el-radio-group v-model="accessRadio">
                <el-radio :label="1">{{$t('custom.component.shareLinkDialog.everyone')}}</el-radio>
                <el-radio :label="2">{{$t('custom.component.shareLinkDialog.selectedUsers')}}</el-radio>
              </el-radio-group>
              <div v-if="accessRadio===2"
                   style="margin-left: 20px">
                <el-select v-model="selectedUser"
                           filterable
                           clearable
                           multiple
                           collapse-tags
                           :placeholder="$t('custom.clientbot.selectusers')">
                  <el-option v-for="item in userListData"
                             :key="item.id"
                             :label="item.realName"
                             :value="item.id"></el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <el-button type="primary" size="mini"
                   v-loading="loading"
                   @click="saveShare('shareAbleLink')">Save</el-button>
        <el-button type="text"
                   @click="dialogVisible = false">{{
            $t('custom.component.shareLinkDialog.cancel')
          }}
        </el-button>
      </el-tab-pane>
      <el-tab-pane label="SNAPSHOT"
                   name="1"
                   class="snapshot"
                   v-if="!$route.path.includes('Bots') && $route.path !== '/FormList'&&!showTV">
        <el-form label-position="left"
                 :model="snapshot"
                 label-width="125px">
          <el-form-item label="Delivery options">
            <el-checkbox-group v-model='snapshot.deliverOptions'
                               :max='1'>
              <el-checkbox label="0"
                           disabled>Email</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="Email recipient(s)">
            <div style="display:flex;justify-content: space-between;">
              <select-lazy v-model="snapshot.emailRecipient"
                           :allData="snapshotEmailOptions"
                           labelKey="email"
                           :attr="{
                multiple: true,
                filterable: true,
                'allow-create': true,
                'default-first-option': true,
                placeholder: 'Enter recipient emails',
                size: 'small',
                clearable: true
                           }"
                           valueKey="email"
                           style="width:80%"></select-lazy>
              <div style="display:flex;justify-content: space-between;">
                <div v-if="!isShowCC" class="cc" @click="isShowCC=true">CC</div>
                <div v-if="!isShowBCC" class="cc" @click="isShowBCC=true">BCC</div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="CC" v-if="isShowCC">
            <div style="display:flex;justify-content: space-between;">
              <select-lazy v-model="snapshot.emailCC"
                           :allData="snapshotEmailOptions"
                           labelKey="email"
                           :attr="{
                multiple: true,
                filterable: true,
                'allow-create': true,
                'default-first-option': true,
                placeholder: 'Enter recipient emails',
                size: 'small',
                clearable:true
                           }"
                           valueKey="email"
                           style="width:80%"></select-lazy>
            </div>
          </el-form-item>
          <el-form-item label="BCC" v-if="isShowBCC">
            <div style="display:flex;justify-content: space-between;">
              <select-lazy v-model="snapshot.emailBCC"
                           :allData="snapshotEmailOptions"
                           labelKey="email"
                           :attr="{
                multiple: true,
                filterable: true,
                'allow-create': true,
                'default-first-option': true,
                placeholder: 'Enter recipient emails',
                size: 'small',
                clearable:true
                           }"
                           valueKey="email"
                           style="width:80%"></select-lazy>
            </div>
          </el-form-item>
          <!-- <el-form-item> -->
            <div class="switchTip">
              <span>
                {{ $t('custom.component.shareLinkDialog.clientmapping')}}
              </span>
              <el-tooltip popper-class="tip"
                          effect="dark"
                          placement="top-start"
                          :offset=54>
                <div slot="content">
                  Select your PSA from the menu to automatically send <br> a snapshot of client-specific data. Use this function <br> if your dashboard contains data for multiple clients <br> and you want to send different data for each client.
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
              &nbsp;&nbsp;
              <el-select v-model="snapshot.clientMapping"
                         clearable
                         placeholder="">
                <el-option v-for="item in clientMappingOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </div>
          <!-- </el-form-item> -->
          <!-- <el-form-item> -->
          <div style="margin-top:20px;display:flex;justify-content:space-between;align-items:center;">
            <div>Frequency</div>
            <el-select v-model="snapshot.timezoneid"
                       filterable
                       clearable
                       default-first-option
                       @change="changeTimeZone"
                       class="selected-input">
                         <el-option v-for="item in timezoneList"
                                   :key="item"
                                   :label="item"
                                   :value="item">
                         </el-option>
            </el-select>
          </div>
          <TypeScheduleFixRate ref="TypeScheduleFixRate"
                               :dataForm.sync='dataForm'
                               :scriptItem='scriptItem'
                               :shareDashboard="'shareDashboard'"
                               model="snapshot">
          </TypeScheduleFixRate>
          <!-- <div class="copyBox"> -->
          <!-- <el-input :value="snapshot.cron" readonly></el-input> -->
          <!-- <el-popover
                  v-model='cronPopover'
                  placement="right"
                  trigger="click">
                <vue-cron i18n="en" ref="vuecron" @change="changeCron" @close="cronPopover=false"></vue-cron>
                <el-button size="small" slot="reference">setting</el-button>
              </el-popover> -->
          <!-- </div> -->
          <!-- </el-form-item> -->
          <el-form-item label="Attach the dashboard"
                        label-width="150px">
            <template>
              <el-checkbox v-model="snapshot.checked"></el-checkbox>
            </template>
          </el-form-item>
          <el-form-item label="File format">
            <!-- <el-radio v-model="snapshot.fileFormat"
                      :disabled="!snapshot.checked"
                      label="1">JPG
              <el-tooltip effect="dark"
                          placement="top">
                <div slot="content">The File Format: JPG<br />will send each<br />Databoard as a<br />separate JPG<br />attachment
                  in the<br />scheduled email.
                </div>
                <i class="el-icon-info" />
              </el-tooltip>
            </el-radio> -->
            <el-radio v-model="snapshot.fileFormat"
                      :disabled="!snapshot.checked"
                      label="0">PDF
              <el-tooltip effect="dark"
                          placement="top">
                <div slot="content">The File Format: PDF<br />will combine<br />Databoards in a<br />multi-page PDF
                  that<br />will be attached to<br />the scheduled email.
                </div>
                <i class="el-icon-info" />
              </el-tooltip>
            </el-radio>
          </el-form-item>
          <fromSmtpAddress v-if="dialogVisible" v-model="snapshot.emailFromId"></fromSmtpAddress>
          <div class="quill-parent-title">
            <el-input v-model="snapshot.title"
                      id="smsDetail"
                      placeholder="Add a custom subject (required)">
            </el-input>
            <div class="insert-token-title">
              <el-popover
                  popper-class="token-class"
                  placement="top"
                  title="Dynamic Token"
                  v-model="tokenVisibileTitle"
                  width="250"
                  trigger="click">
                  <div class="item" v-for="item in tokenList" :key="item" @click="handleTokenTitle(item)">{{item}}</div>
                  <el-button size="mini"
                            type="primary"
                            plain
                            slot="reference"
                            style="padding:7px;border:none;">
                      <span class="cuifont icon_insert_token"
                            style="fontSize:14px;"></span>
                  </el-button>
              </el-popover>
            </div>
          </div>
          <el-form-item></el-form-item>
          <div class="quill-parent-content">
            <!-- <quill-editor ref="myTextEditor" v-model="snapshot.desc"></quill-editor> -->
            <ZTinymce v-model="snapshot.desc"
                v-if="dialogVisible"
                ref="myTextEditor"
                :height="50" />
            <div class="insert-token-content">
              <el-popover
                popper-class="token-class"
                placement="top"
                title="Dynamic Token"
                v-model="tokenVisibileContent"
                width="250"
                trigger="click">
                <div class="item" v-for="item in tokenList" :key="item" @click="handleTokenContent(item)">{{item}}</div>
                <el-button size="mini"
                          type="primary"
                          plain
                          slot="reference"
                          style="padding:7px;border:none;">
                    <span class="cuifont icon_insert_token"
                          style="fontSize:14px;"></span>
                </el-button>
              </el-popover>
            </div>
          </div>
          <el-form-item></el-form-item>
          <el-checkbox v-model="snapshot.includeLink"
                       @change="includeShareLink">Include Shareable link
            <el-tooltip effect="dark"
                        placement="top">
              <div slot="content">Select this option to give clients view-only <br /> access to your dashboard(s).</div>
              <i class="el-icon-question" />
            </el-tooltip>
          </el-checkbox>
          <el-checkbox v-model="snapshot.hideFooter">Hide the email footer</el-checkbox>
          <el-form-item></el-form-item>
        </el-form>
        <el-button type="primary" size="mini"
                   v-loading="loading"
                   @click="saveShare('snapshot')">{{ shareId ? 'Update' : 'Scheduled' }}</el-button>
        <el-button type="text"
                   @click="dialogVisible = false">Cancel</el-button>
        <div class="snapshotTable">
          <el-button class="showTable"
                     size="mini"
                     :icon="scheduledTable ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                     @click="scheduledTable = !scheduledTable">Scheduled
          </el-button>
          <div v-if="scheduledTable">
            <el-tabs @tab-click="tabClick" v-model="logActive">
              <el-tab-pane label="Scheduler" name="Scheduler">
                <el-table
                          :data="tableData">
                  <el-table-column label="Recipient">
                    <template slot-scope="scope">
                      {{ (scope.row.config.emailRecipient).toString() }}
                    </template>
                  </el-table-column>
                  <el-table-column label="Frequency"
                                   width="180">
                    <template slot-scope="scope">
                      {{ scope.row.config.scheduleConf||scope.row.config.cron }}
                    </template>
                  </el-table-column>
                  <el-table-column label="File Format">
                    <template slot-scope="scope">
                      {{ scope.row.config.fileFormat==='-1'?'':(scope.row.config.fileFormat === '1' ? 'JPG' : 'PDF') }}
                    </template>
                  </el-table-column>
                  <el-table-column label="Action">
                    <template slot-scope="scope">
                      <el-tooltip class="item" effect="dark" content="Edit" placement="top" :open-delay="1000">
                        <el-button type="text"
                                 icon="el-icon-edit"
                                 size="medium"
                                 @click="writeUserInfo(scope.row)"></el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="Send Now" placement="top" :open-delay="1000">
                        <el-button type="text"
                                 class="cuifont icon_mail_send"
                                 style="font-size: 14px;"
                                 size="medium"
                                 @click="sendNow(scope.row)"></el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="Send To Me" placement="top" :open-delay="1000">
                        <el-button type="text"
                                 class="cuifont icon_person_mail"
                                 style="font-size: 14px;"
                                 size="medium"
                                 @click="sendMe(scope.row)"></el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="Delete" placement="top" :open-delay="1000">
                        <el-button type="text"
                                 icon="el-icon-delete"
                                 size="medium"
                                 @click="deleteShareUser(scope.row)"></el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="Log" name="Log">
                <el-table ref="multipleTable" :data="logList" border style="width: 100%">
                  <el-table-column prop="toAddress" label="Recipient"  show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="logEvent" label="LogEvent"  show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="startTime" label="Send Time">
                    <template slot-scope="scope">
                      {{timeformat(scope.row.startTime)}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="Status">
                    <template slot-scope="scope">
                      <el-tag size="small" style="width:90px;text-align: center;" :type="typeCom(scope.row)">{{textCom(scope.row)}}</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination layout="total,prev, pager, next" :total="total" background :page-size="size"
                  :current-page='currentPage' @current-change="handleCurrentChange">
                </el-pagination>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="EMBED"
                   name="2"
                   v-if="!$route.path.includes('Bots') && $route.path !== '/FormList'&&!showTV">
        <el-form label-position="left">
          <el-form-item label="Copy this HTML code to embed a live Databoard"></el-form-item>
          <el-form-item>
            <el-input type="textarea"
                      :value="embed.content"
                      resize='none'
                      :rows="6"></el-input>
          </el-form-item>
          <el-form-item label="Size"
                        label-width="90px">
            <el-radio v-model="embed.size"
                      label="0"
                      @change="getEmbedIframe">Responsive</el-radio>
            <el-radio v-model="embed.size"
                      label="1"
                      @change="getEmbedIframe">Fixed</el-radio>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="mini"
                   @click="copyLink(embed.content, 'embed')">Copy Code</el-button>
        <el-button type="text"
                   @click="dialogVisible = false">Cancel</el-button>
      </el-tab-pane>
      <el-tab-pane label="SHARE TO COMMUNITY"
                   name="3"
                   v-if="($route.path.includes('Bots') || $route.path === '/Dashboards'||$route.path.indexOf('dashboard-')!==-1)&&!showTV ">
        <shareToCommunity ref="shareToCommunity"
                          :loading="loading"
                          :resourceType='resourceType'
                          :shareToCommunity.sync="shareToCommunity"
                          :dialogVisible.sync="dialogVisible"
                          @submit="saveShare('shareToCommunity')" />
      </el-tab-pane>
      <el-tab-pane label="STREAM TO TV"
                   name="4" v-if="source === 'dashboard' && layoutType === 'report_layout'">
        <stream-to-device ref='tv' :formId="formId" :dialogVisible.sync="dialogVisible"></stream-to-device>
      </el-tab-pane>
      <el-tab-pane label="USER ACCESS"
                   name="5"
                   disabled
                   v-if='false&&!showTV'>
        <el-form>
          <el-form-item>
            <el-radio v-model="radio1"
                      label="1">Everyone</el-radio>
            <div class="userInfo">Visible all users in your account</div>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="radio1"
                      label="2">Selected users</el-radio>
            <div class="userInfo">otrbvucogavlbmndha Select users...</div>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="radio1"
                      label="3">Private</el-radio>
            <div class="userInfo">Only visible to you</div>
          </el-form-item>
        </el-form>
        <el-button size="mini" type="primary">Save</el-button>
        <el-button type="text">Cancel</el-button>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script>
import { copyData, getUUID } from '@/utils'
import { debounce, get } from 'lodash'
import shareToCommunity from '@/components/share-link-dialog/src/shareToCommunity'
import streamToDevice from "@/components/share-link-dialog/src/stream-to-device.vue";
import Cookies from 'js-cookie'
import TypeScheduleFixRate from '@/components/script-render/components/type-schedule-fix-rate'
import selectLazy from '@/components/select-lazy'
import { replaceEmailContent } from '@/utils/formatEmail.js'
import {

  updateCommunityReport
} from '@/api/new'
import { v4 } from 'uuid'
import moment from 'moment'
import fromSmtpAddress from '@/components/fromSmtpAddress/fromSmtpAddress.vue'
import { GlobalTimeformat } from '@/utils/common'
import ZTinymce from '@/components/storybook/z-tinymce/index.vue'
import { TimeZoneNameList } from '@/utils'
// const getQueryString = (name, search) => {
//   search = search || window.location.search.substr(1) || window.location.hash.split('?')[1]
//   let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
//   let r = search.match(reg)
//   if (r != null) return unescape(r[2]); return null
// }
const isEmail = (s) => {
  return /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(s)
}
export default {
  name: 'ShareLinkDialog',
  components: {
    shareToCommunity, TypeScheduleFixRate, selectLazy, streamToDevice,fromSmtpAddress,ZTinymce
  },
  props: {
    source: String,
    resourceType: String
  },
  data () {
    return {
      loading: false,
      initData: {},
      dialogVisible: false,
      cronPopover: false,
      activeName: '0',
      radio1: null,
      shareToken: null,
      shareSetting: false,
      shareLimitIp: false,
      sharePassword: false,
      showRevokeToken: false,
      maxtotalNum: 1,
      timeRadio: 1,
      accessRadio: 1,
      selectedUser: [],
      userListData: [],
      selectdTime: '',
      selectedDate: '',
      shareAbleLink: {
        ip: '',
        password: '',
        limitViewingTime: false
      },
      snapshotEmailOptions: [],
      scheduledTable: true,
      snapshot: {
        deliverOptions: ['0'],
        clientMapping: '',
        emailRecipient: [],
        cron: '',
        fileFormat: '0',
        dateRange: '0',
        title: '',
        desc: '',
        checked: true,
        includeLink: false,
        hideFooter: false,
        emailFromId:'',
        emailCC:[],
        emailBCC:[],
        timezoneid: null
      },
      embed: {
        size: '0',
        content: ''
      },
      shareToCommunity: {
        uploadCommunity: false,
        botName:'',
        companyName: '',
        companyWebsite: '',
        status: ''
      },
      userAccess: {},
      tableData: [],
      Emailoptions: [],
      shareLink: null,
      hasShare: false,
      formId: null,
      shareId: null,
      timeOption: [
        {
          value: 'hour',
          label: 'Hour(s)'
        },
        {
          value: 'day',
          label: 'Day(s)'
        },
        {
          value: 'month',
          label: 'Month(s)'
        }
      ],
      clientMappingOptions: [
        {
          value: '0',
          label: 'Autotask'
        },
        {
          value: '1',
          label: 'ConnectWise'
        },
        {
          value: '2',
          label: 'Kaseya'
        },
        {
          value: '3',
          label: 'Syncro'
        },
        {
          value: '4',
          label: 'Halo'
        }
      ],
      layoutType: null,
      row: {},
      dataForm: { '': '', 'layout': '', 'filters': { 'rules': [{ 'key': '', 'opt': '', 'type': 'text' }], 'condition': 'and' }, 'frequency': { 'dates': '', 'times': '', 'number': '', 'cornstr': '', 'dateValue': '4' }, 'filtersSQL': '', 'radioSelect': { 'selectId': '', 'radioType': 'widget' }, 'scheduleTemplate': { 'times': '', 'number': 1, 'weekTwo': [], 'selectId': 0, 'dateValue': 'hour', 'numberTwo': 1, 'fromTwo': '', 'toTwo': '', 'scheduleConf': '', 'scheduleType': 'CRON' } },
      scriptItem: { 'hint': '', 'text': 'scheduleTemplate', 'type': 'schedule-fix-rate', 'dates': 'dates', 'label': 'I want the bot to run base on this schedule:', 'times': 'times', 'toTwo': 'toTwo', 'number': 'number', 'cornstr': 'scheduleConf', 'fromTwo': 'fromTwo', 'weekTwo': 'weekTwo', 'cronData': 'cronData', 'selectId': 'selectId', 'dateValue': 'dateValue', 'numberTwo': 'numberTwo', 'defaultValue': { 'times': '', 'number': 1, 'weekTwo': [], 'selectId': 0, 'dateValue': 'hour', 'numberTwo': 1, 'scheduleConf': '', 'scheduleType': 'CRON' }, 'scheduleType': 'scheduleType' },
      isShowCC: false,
      isShowBCC:false,
      logList:[],
      currentPage: 1,
      size: 10,
      total: 0,
      logActive:'Scheduler',
      tokenList: ['{{recipient_company_name}}','{{recipient_name}}','{{report_name}}','{{report_owner_name}}','{{report_owner_email}}','{{report_link}}','{{your_company_name}}'],
      tokenVisibileContent: false,
      tokenVisibileTitle: false,
      showTV: false,
      scheduleTimeZoneId: null,
      timezoneList: []
    }
  },
  watch: {
    activeName (val) {
      if (val === '4') {
        this.$nextTick(()=>{
          this.$refs.tv.getDeviceManageListAll()
        })
      }
    },
  },
  methods: {
    changeTimeZone (val){
      this.$set(this.dataForm.scheduleTemplate, 'timezoneid', val)
      this.$set(this.dataForm.scheduleTemplate, 'timezoneoffset', moment.tz(val).format('Z'))
    },
    handleTokenContent (value) {
      if (!value) {
        return false
      }
      // const quillSelf = this.$refs.myTextEditor.quill
      // quillSelf.focus()
      // let selection = quillSelf.getSelection()
      // let nowIndex = 0
      // if (selection) {
      //   nowIndex = selection.index
      // }
      // quillSelf.clipboard.dangerouslyPasteHTML(nowIndex, value)
      this.tokenVisibileContent = false
      this.$refs['myTextEditor'].focus()
      const range = this.$refs['myTextEditor'].getRng()
      const node = document.createElement('span');
      node.innerHTML = `<span style="white-space:pre">&nbsp;&nbsp;</span><strong style="color:#17B3A3">${value}</strong><span>&nbsp;&nbsp;</span>`;
      range.insertNode(node);
    },
    async handleTokenTitle (val) {
      var myValue = val
      const myField = document.querySelector('#smsDetail');
      myField.focus()
      if (myField.selectionStart || myField.selectionStart === 0) {
        var startPos = myField.selectionStart 
        var endPos = myField.selectionEnd 
        this.snapshot.title = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length)
        await this.$nextTick() 
        myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
      } else {
        this.snapshot.title += myValue
      }
      this.tokenVisibileTitle = false
    },
    async init (row, url,type) {
      if(type === 'showTV') {
        this.showTV = true
      }
      this.layoutType = row.layoutType || ''
      this.getUrl(url)
      this.dialogVisible = true
      if (this.resourceType === 'Form') {
        this.formId = row.formCode
      } else if (this.resourceType === 'Report' || this.resourceType === 'Bot') {
        this.formId = row.id
        this.shareToCommunity.botName= `${row.name} (share at ${moment().utc().format()})`
      } else if (this.resourceType === 'ReportHeader') {
        this.formId = row.businessId
      }

      if (row.id && !row.dashboardSetting) {
        const { data: response } = await this.$interface.reports.getDashboardLayout({
          businessId: row.id
        })
        row.dashboardSetting = response&&response.data&&response.data.dashboardSetting?response.data.dashboardSetting:{}
      }
      this.useStatus = row.useStatus || ''
      this.row = row
      if(type !== 'showTV') {
        this.getFormListShare()
        this.getUserLists()
        this.shareUserListData()
        // this.getSmtpItems()
      }
    },


    getFormListShare () {
      this.loading = true
      this.$interface.reports.getformlistShareData(this.formId).then(({ data: res }) => {
        this.loading = false
        if (res.data && res.data.id) {
          this.shareId = res.data.id
        } else {
          if (this.$route.path !== '/FormList') {
            this.revokeToken()
          }
        }
        this.shareLink = res.data.resourceUrl
        this.initData = res.data
        if(!this.initData.emailFromId) {
          this.$set(this.initData,'emailFromId','')
        }
        this.copyResourceId = res.data.copyResourceId || ''
        if (!res.data.expiredValue && !res.data.expiredNum) {
          this.timeRadio = 1
          this.selectedDate = ''
          this.selectdTime = ''
        } else {
          this.timeRadio = 2
          this.selectedDate = res.data.expiredNum
          this.selectdTime = res.data.expiredValue
        }
        if (res.data.permissionValue) {
          this.accessRadio = 2
          this.selectedUser = res.data.permissionValue.split(',')
        } else {
          this.accessRadio = 1
          this.selectedUser = []
        }
        this.getMaxtotalNum()
        if (res.data.config.shareAbleLink) {
          this.shareAbleLink = res.data.config.shareAbleLink
          this.shareLimitIp = Boolean(this.shareAbleLink.ip)
          this.sharePassword = Boolean(this.shareAbleLink.password)
          this.getUrl(this.shareLink)
        }
        if(res.data.shareToken) {
          this.shareToken = res.data.shareToken
        }
        if (res.data.config.embed) {
          this.embed = res.data.config.embed
        }
        if (res.data.config.shareToCommunity) {
          this.shareToCommunity = res.data.config.shareToCommunity
        }
        this.getEmbedIframe()
        this.shareUserList()
      }).catch(() => {
        this.loading = false
      })
    },
    shareUserList () {
      let _self = this
      _self.$interface.reports.shareUserList(_self.shareId).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          res.data.data.forEach(item => {
            if (item.config.cron && !item.config.scheduleConf) {
              item.config.scheduleConf = item.config.cron
              item.config.selectId = 2
            }
            item.createTimeStamp = this.timeToTimeStamp(item.createTime)
          })
          res.data.data.sort((a, b) => a.createTimeStamp - b.createTimeStamp)
          _self.tableData = [res.data.data[res.data.data.length - 1]]
        }
        const array = []
        let arrObj = {}
        _self.tableData.map(item => {
          if (item.config.emailRecipient && typeof item.config.emailRecipient === 'string') {
            item.config.emailRecipient = item.config.emailRecipient.split(',')
          }
          if (item.config.deliverOptions && typeof item.config.deliverOptions === 'string') {
            item.config.deliverOptions = item.config.deliverOptions.split(',')
          }
          if (item.config.emailCC && typeof item.config.emailCC === 'string') {
            item.config.emailCC = item.config.emailCC.split(',')
          }
          if (item.config.emailBCC && typeof item.config.emailBCC === 'string') {
            item.config.emailBCC = item.config.emailBCC.split(',')
          }
          item.config.emailRecipient.map(items => {
            if (!arrObj[items]) {
              arrObj[items] = true
              array.push({
                label: items,
                value: items
              })
            }
          })
        })
        // _self.snapshotEmailOptions = array
      })
    },
    timeToTimeStamp (time) {
      if (!time || time.length !== 20) return time
      return +new Date(time.substr(0, 4), time.substr(5, 2), time.substr(8, 2), time.substr(11, 2), time.substr(14, 2), time.substr(17, 2))
    },
    shareUserListData () {
      let params = {
        gadgetId: '10fdf6f4-a362-4057-8712-40010985414a'
        // filter: "\"type\" =  'sts'"
      }
      this.$interface.reports.shareUserDataList(params).then((res) => {
        if (res.data.code === 0) {
          this.snapshotEmailOptions = res.data.data.filter(item => item.email !== '')
        }
      }).catch(() => { })
    },
    deleteShareUser (row) {
      this.$confirm(this.$t('custom.apps.deleteconfirmsnapshot'), this.$t('custom.apps.warning'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        // type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.$interface.reports.deleteShareUser(row.id).then(res => {
          if (res.data.code === 0) {
            this.$message.success('success')
            // this.shareUserList()
            this.tableData = []
          }
        })
      })
    },
    writeUserInfo (row) {
      try {
        if(row.config.emailCC.length>0) {
          this.isShowCC = true
        }
        if(row.config.emailBCC.length>0) {
          this.isShowBCC = true
        }
      } catch (error) {
        
      }
      if(this.$refs['myTextEditor']&&this.$refs['myTextEditor'].hasChange){
        this.$refs['myTextEditor'].hasChange=false
      }
      this.snapshot = row.config
      // this.dataForm[this.scriptItem.text] = {
      //   ...this.dataForm[this.scriptItem.text],
      //   ...row.config
      // }
      this.dataForm[this.scriptItem.text].scheduleConf = row.config.scheduleConf || ''
      this.dataForm[this.scriptItem.text].cronData = row.config.cronData
      this.dataForm[this.scriptItem.text].dateValue = row.config.dateValue || ''
      this.dataForm[this.scriptItem.text].fromTwo = row.config.fromTwo || ''
      this.dataForm[this.scriptItem.text].number = row.config.number || ''
      this.dataForm[this.scriptItem.text].numberTwo = row.config.numberTwo || ''
      this.dataForm[this.scriptItem.text].selectId = row.config.selectId || ''
      this.dataForm[this.scriptItem.text].times = row.config.times || ''
      this.dataForm[this.scriptItem.text].toTwo = row.config.toTwo || ''
      this.dataForm[this.scriptItem.text].weekTwo = row.config.weekTwo || ''
      this.dataForm[this.scriptItem.text].timezoneid = row.config.timezoneid || this.$store.state.user.timezoneId
      this.dataForm[this.scriptItem.text].timezoneoffset = row.config.timezoneoffset || moment.tz(this.dataForm[this.scriptItem.text].timezoneid).format('Z')
      this.$refs.TypeScheduleFixRate.initDate()
    },
    getParams (key) {
      let config = Object.assign({}, this[key])
      let userData=`timezoneId=${this.$store.state.user.timezoneId}&timezoneOffset=${this.$store.state.user.timezoneOffset}&autotaskUrl=${this.$store.state.user.domainUrl.autotaskUrl}&syncroMspUrl=${this.$store.state.user.domainUrl.syncroMspUrl}&cwUrl=${this.$store.state.user.domainUrl.cwUrl}&haloUrl=${this.$store.state.user.domainUrl.haloUrl}&timeFormat=${this.$store.state.user.timeFormat}`
      if (key === 'snapshot') {
        config.deliverOptions = config.deliverOptions[0]


        config.resourceUrl = `${window.location.origin}/publicReportPdf?pageid=${this.resourceType === 'ReportHeader' ? this.row.businessId : this.row.id}&tenantCode=${this.$store.state.user.tenantCode}&${userData}`
        if (this.snapshot.emailRecipient.length === 0) {
          return this.$message.error('Please enter Email')
        }
        if (config.emailRecipient instanceof Array) {
          const noEmail = this._.find(config.emailRecipient, (item) => {
            return !isEmail(item)
          })
          if (noEmail) {
            return this.$message.error(`${noEmail} Email address error`)
          } else {
            config.emailRecipient = config.emailRecipient.join(',')
            if(config.emailCC) config.emailCC = config.emailCC.join(',')
            if(config.emailBCC) config.emailBCC = config.emailBCC.join(',')
          }
        }
        // if (!this.snapshot.cron) {
        //   return this.$message.error('Please enter Frequency')
        // }
        if (!this.snapshot.title) {
          return this.$message.error('Please enter custom subject')
        }
      }
      config.desc = config.desc && replaceEmailContent(config.desc)
      if (key === 'shareToCommunity') {
        if (!this.shareToCommunity.companyName) {
          return this.$message.error('')
        }
        config.name = this.row.name
        config.description = this.row.description
        config.tenantCode = Cookies.get('tenant_code')
        if (this.resourceType === 'Bot') {
          config.status = this.useStatus
          config.name = this.shareToCommunity.botName
        }
      }
      let intConfig = this.initData.config || {}
      intConfig[key] = config
      this.loading = true
      let params = {
        resourceId: this.formId,
        resourceType: this.resourceType,
        resourceUrl: this.shareLink,
        expiredNum: this.selectedDate,
        expiredValue: this.selectdTime,
        permissionType: 'user',
        permissionValue: this.selectedUser.join(','),
        shareToken: this.shareToken,
        copyResourceId: this.copyResourceId,
        tenantCode: Cookies.get('tenant_code'),
        config: intConfig
      }
      if (this.shareId) {
        params.id = this.shareId

      }
      params.tagType = this.activeName
      if (this.accessRadio === 1) delete params.permissionValue
      if (this.timeRadio === 1) {
        delete params.expiredNum
        delete params.expiredValue
      }
      if (key === 'snapshot') {
        params.config.snapshot = {
          ...params.config.snapshot,
          ...this.dataForm[this.scriptItem.text]
        }
        if (this.snapshot.checked === false) {
          params.config.snapshot.fileFormat = '-1'
        }
      }
      return params
    },
    requestResult (res, key, copy) {
      this.loading = false
      if (res.code !== 0) {
        this.$message.error(res.msg)
      } else {
        if (res.data.id) {
          this.shareId = res.data.id
        }
        this.initData = res.data
        if(!this.initData.emailFromId) {
          this.$set(this.initData,'emailFromId','')
        }
        this.copyResourceId = res.data.copyResourceId || ''
        if (key === 'shareAbleLink') {
          this.getUrl(this.shareLink)
          if (!copy) {
            this.copyLink(this.shareLink)
          }
        }
        if (key === 'snapshot') {
          this.scheduledTable = true
          if(this.$refs['myTextEditor']&&this.$refs['myTextEditor'].hasChange){
            this.$refs['myTextEditor'].hasChange=false
          }
          this.snapshot = {
            checked: true,
            clientMapping: '',
            deliverOptions: ['0'],
            emailRecipient: [],
            cron: '',
            fileFormat: '0',
            dateRange: '0',
            title: '',
            desc: '',
            includeLink: false,
            hideFooter: false,
            emailFromId: '',
            emailCC: [],
            emailBCC: []
          }
        }
        if (key === 'shareToCommunity') {
          if (this.$route.path === '/Dashboards') {
            if (res.data.copyResourceData) {
              this.addReportRouter(res.data.copyResourceData)
            }
          }
          this.$emit('refreshTagList')
        }
        this.shareUserListData()
        this.shareUserList()
        this.getEmbedIframe()
        this.$message.success('success')
      }
    },
    saveShare: debounce(function (key, copy) {
      if (key === 'snapshot' && this.snapshot.emailRecipient.length !== 0 && this.snapshot.title) {
        this.saveEmailsdata()
      }
      if (this.shareId) {
        return this.updateFormListData(key, copy)
      }


      this.$interface.reports.formlistShareUrl(this.getParams(key)).then(({ data: res }) => {
        this.requestResult(res, key, copy)
        this.dataForm = this.$options.data().dataForm
        if (this.$refs.TypeScheduleFixRate) {
          this.$refs.TypeScheduleFixRate.reset()
        }
        if (key === 'shareToCommunity') {
          this.close()
        }
      }).catch((error) => {
        console.log(error, 'error')
        this.loading = false
      })
    }, 1000, { 'leading': true, 'trailing': false }),

    saveEmailsdata () {
      let newArr = this.snapshotEmailOptions.filter(ele => ele.type === 'sts')
      let paramsArr = []
      paramsArr = this.snapshot.emailRecipient.filter(item => this.snapshotEmailOptions.every(ele => item !== ele.email))
      newArr.forEach(item => {
        if (item.type === 'sts') {
          if (item.email) {
            paramsArr.unshift(item.email)
          }
        }
      })
      paramsArr = paramsArr.filter(item => item !== undefined)
      const params = {
        type: 'REPORT_SNAPSHOT_SETTING',
        keyword: 'snapshot.eamil',
        value: paramsArr.join()
      }
      this.$interface.reports.saveEmailsData(params).then((res) => {
      }).catch(() => {
      })
    },

    updateFormListData (key, copy) {
      updateCommunityReport({ ...this.getParams(key), originalId: this.shareId }).then(({ data: res }) => {
        this.requestResult(res, key, copy)
        this.dataForm = this.$options.data().dataForm
        if (this.$refs.TypeScheduleFixRate) {
          this.$refs.TypeScheduleFixRate.reset()
        }
        if (key === 'shareToCommunity') {
          this.close()
        }
      }).catch(() => {
        this.loading = false
      })
    },
    addReportRouter (route) {
      this.changePages({
        id: route.id,
        name: 'report-' + route.name
      })
    },
    changePages (newParam) {
      this.$store.dispatch('routeMetaStor', {
        menuId: newParam.id,
        title: newParam.name
      })
    },
    copyLink (str, copy) {
      copyData(str)
      if (copy) {
        if (copy === 'embed') {
          this.saveShare('embed', true)
        }
        if (copy === 'shareAbleLink') {
          this.saveShare('shareAbleLink', true)
        }
        this.$message.success('Copy Success!')
      }
    },
    changeCron (value) {
      this.snapshot.cron = value.cron
    },
    revokeToken () {
      this.shareToken = getUUID().replace(/-/g, '')
      let host = (window.location.origin + '/publicReport').split('?')
      if(this.$route.path.includes('/Scorecards')||this.$route.path.includes('/scorecard')) {
        this.shareLink = `${host[0]}?shareToken=${this.shareToken}&layoutType=scorecard_layout`
      }else {
        this.shareLink = `${host[0]}?shareToken=${this.shareToken}`
      }
    },
    getUrl (url) {
      this.shareLink = url
    },
    getEmbedIframe () {
      if (this.shareId) {
        const size = this.embed.size
        let style = ''
        if (size === '0') {
          style = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%;'
        } else {
          style = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%;'
        }
        this.embed.content = `<iframe src="${this.shareLink}" style="${style}" frameborder="0"></iframe>`
      }
    },
    removeInput (val, key) {
      if (!val) {
        this.shareAbleLink[key] = ''
      }
    },
    close () {
      if(this.$refs['myTextEditor']){
        this.$refs['myTextEditor'].destroyTinymce()
      }
      Object.assign(this.$data, this.$options.data())
      this.$refs.TypeScheduleFixRate&&this.$refs.TypeScheduleFixRate.reset()
      this.$refs.shareToCommunity&&this.$refs.shareToCommunity.reset()
      this.logActive = 'Scheduler'
    },
    open () {
      this.shareToCommunity.companyName = this.$store.state.user.tenantName
      this.activeName = this.$route.path.includes('Bots') ? '3' : '0'
      if(this.showTV) {
        this.activeName = '4'
      }
      this.timezoneList = TimeZoneNameList()
      this.snapshot.timezoneid = this.dataForm.scheduleTemplate&&this.dataForm.scheduleTemplate.timezoneid?this.dataForm.scheduleTemplate.timezoneid:this.$store.state.user.timezoneId
      this.$set(this.dataForm.scheduleTemplate, 'timezoneid', this.snapshot.timezoneid)
      this.$set(this.dataForm.scheduleTemplate, 'timezoneoffset', moment.tz(this.snapshot.timezoneid).format('Z'))
      this.$refs.TypeScheduleFixRate && this.$refs.TypeScheduleFixRate.initDate()
    },
    includeShareLink (val) {
      if(this.$refs['myTextEditor']&&this.$refs['myTextEditor'].hasChange){
        this.$refs['myTextEditor'].hasChange=false
      }
      let link = '<a style="color: #17b3a3; text-decoration: none; font-weight: bold;">{{report_link}}</a>'
      if (val) {
        // this.snapshot.desc = `${this.snapshot.desc} ${this.shareLink}`
        this.snapshot.desc = `${this.snapshot.desc} ${link}`
      } else {
        // this.snapshot.desc = this.snapshot.desc.replace(this.shareLink, '')
        // var re = /<a[^>]*href=['"]([^"]*)['"][^>]*>(.*?)<\/a>/g
        this.snapshot.desc = this.snapshot.desc.replace(link, '')
      }
    },
    getMaxtotalNum () {
      let num = 1
      if (this.selectdTime === 'hour') {
        num = 24
      }
      if (this.selectdTime === 'day') {
        num = 365
      }
      if (this.selectdTime === 'month') {
        num = 12
      }
      this.maxtotalNum = num
    },
    changeData () {
      this.selectedDate = 1
      this.getMaxtotalNum()
    },
    getUserLists () {
      const params = {
        status: 1
      }
      this.$interface.schedule.getWorkScheduledUserListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$message.error(res.msg)
          }
          this.userListData = res.data
        })
    },
    sendNow (row) {
      this.$confirm(this.$t('custom.apps.doyousendnow'), this.$t('custom.apps.sendnow'), {
        confirmButtonText: this.$t('custom.apps.sendnow'),
        cancelButtonText: this.$t('cancel'),
        // type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        let params = {
          id:this.shareId,
          config:{
            snapshot:row.config
          }
        }
        this.$interface.reports.postSendNowApi(params).then(({data:res}) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          if (res.code === 0) {
            this.$message.success('success')
          }
        })
      })
    },
    sendMe (row) {
      this.$confirm(this.$t('custom.apps.doyousendme'), this.$t('custom.apps.sendtome'), {
        confirmButtonText: 'Send to Me',
        cancelButtonText: 'Cancel',
        // type: 'warning',
        duration:5000,
        dangerouslyUseHTMLString: true
      }).then(() => {
        let params = {
          id:this.shareId,
          config:{
            snapshot:row.config
          }
        }
        this.$interface.reports.postSendMeApi(params).then(({data:res}) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          if (res.code === 0) {
            this.$message.success('The snapshot dashboard has been sent to your email address, please check your email.')
          }
        })
      })
    },
    getLogList () {
      const params = {
        shareId:this.shareId,
        current:this.currentPage,
        size:this.size
      }
      this.$interface.reports.getShareLogList(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$message.error(res.msg)
          }
          this.logList = res.data.records
          this.total = res.data.total
        })
    },
    tabClick(e) {
      if(e.label === 'Log') {
        this.getLogList()
      }
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.getLogList()
    },
    timeformat (time) {
      return GlobalTimeformat(time, 'HH:mm')
    },
    typeCom (row) {
      let res = ''
      switch (row.status) {
        case 0:
          res = 'info'
          break;
        case 1:
          res = 'success'
          break;
        case 2:
          res = 'danger'
          break;

        default:
          break;
      }
      return res
    },
    textCom (row) {
      let res = ''
      switch (row.status) {
        case 0:
          res = 'Running'
          break;
        case 1:
          res = 'Success'
          break;
        case 2:
          res = 'Failed'
          break;

        default:
          break;
      }
      return res
    }
  }
}
</script>
<style scoped lang="scss">
.quill-parent-title{
  position: relative;
  ::v-deep .el-input__inner {
    padding-right: 32px;
  }
  .insert-token-title {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.quill-parent-content{
  position: relative;
  .insert-token-content {
    position: absolute;
    right: 10px;
    top: 3px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
::v-deep .el-tabs__content {
  overflow: hidden !important;
  .el-tab-pane {
    overflow: visible !important;
  }
  .cc {
    width:40px;
    text-align: center;
    color: #17B3A3;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.token-class{
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  padding-bottom: 50px;
  .el-popover__title{
    color: #fff;
    font-size: 18px;
  }
  .item{
    padding: 5px 10px;
    cursor: pointer;
    user-select: none;
    &:hover{
      color: green;
    }
  }
}
.shareDataboard {
  .copyBox {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .switchTip {
    margin-top: 5px;
  }

  .refresh {
    color: rgba(41, 41, 41, 0.6);
    text-decoration: underline;
  }

  .shareAddSetting {
    color: #1d9ad6;
    font-size: 16px;
    cursor: pointer;
  }

  .shareSetting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
  }

  .databoards {
    margin: 30px 0;
    padding: 20px 15px 20px 70px;
    border-radius: 5px;
    background: #e2f1ea;
  }

  .label-right .el-form-item__label {
    text-align: right;
  }

  .userInfo {
    line-height: 1;
    padding-left: 24px;
  }

  .el-dialog__body {
    /* background: #f8f9f9; */
    padding: 15px 30px 0 30px;
  }

  .el-tabs__nav-wrap {
    overflow: visible;
  }

  .el-tabs__nav-wrap::after {
    left: -30px;
    right: -30px;
    width: auto;
  }

  .el-tabs__header {
    margin-bottom: 0;
  }

  .el-tabs__content {
    padding: 30px;
    background: #f8f9f9;
    margin: 0 -30px;
  }

  .el-dialog__header {
    font-size: 35px;
  }

  // .el-dialog__headerbtn {
  //   font-size: 30px;
  // }

  .snapshotTable {
    background: #fff;
    margin: 0 -30px -30px -30px;
    padding: 20px 30px 10px 30px;
    margin-top: 50px;
    position: relative;
  }

  .snapshotTable .showTable {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    z-index: 9999;
  }
}
</style>
